<script setup lang="js">
import { reactive, ref } from 'vue';
import { queryBedInfo, queryAllRoomByFloor, queryKxcwByRoomNo,exchangeBedInfo,reviseBedInfo } from '@/api/bedApi';
import { queryCustomerInfo } from '@/api/nurseApi';

// 表格中的数据
let tableData = reactive([]);

// 调换床位-房间的列表
let roomList = reactive([]);

// 调换床位-空闲床位信息
let bedList = reactive([]);

// 控制弹窗显示状态
let changeDialogvisible = ref(false);
let reviseDialogvisible = ref(false);

// 传递给后端的数据格式
let queryParam = reactive({
  pageInfoVo: {
    currentPage: 1,
    pageSize: 5,
    total: 0,
    pageNum: 0
  },
  bedDetailsVo: {
    customerName: "",
  }
});

// 获取表格数据
function BedInfoData() {
 queryCustomerInfo(queryParam)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        // 分页数据的设置
        queryParam.pageInfoVo.currentPage = res.data.currentPage;
        queryParam.pageInfoVo.pageSize = res.data.pageSize;
        queryParam.pageInfoVo.total = res.data.total;
        queryParam.pageInfoVo.pageNum = res.data.pageNum;

        // 清空数组中的数据
        tableData.splice(0, tableData.length);

        // 填充表格中的数据
        tableData.push(...res.data.data);
      }
    });
}

BedInfoData();

// 分页事件
// val:表示点击的页码数
function handleCurrentChange(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  BedInfoData();
}

// 点击上一页
// val:表示上一页的页码
function handlePrevClick(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  BedInfoData();
}

// 点击下一页
function handleNextClick(val) {
  queryParam.pageInfoVo.currentPage = val;
  // 重新获取表格中的信息
  BedInfoData();
}

// 按钮的查询事件
function btnQuery() {
  BedInfoData();
}

// 床位调换-显示
function exchange(row) {
  // 床位调试的对话框进行显示
  changeDialogvisible.value = true;

  // 显示调换床位弹出层的内容设置
  exchangeData.exchangeForm.id = row.id;
  exchangeData.exchangeForm.customerName = row.customerName;
  exchangeData.exchangeForm.customerSex = row.customerSex;
  exchangeData.exchangeForm.bedDetails = row.bedDetails;
  exchangeData.exchangeForm.roomNo = row.roomNo;
  exchangeData.exchangeForm.startDate = row.startDate;
  exchangeData.exchangeForm.endDate = row.endDate;
  exchangeData.exchangeForm.oldRoomNo = row.roomNo;
  exchangeData.exchangeForm.customerId = row.customerId;
  exchangeData.exchangeForm.newRoomNo = "";
  exchangeData.exchangeForm.oldBedId = row.bedId;
  exchangeData.exchangeForm.newBedId = "";

  // 默认显示1楼的房间
  getAllRoomsByFloor();
}

// 调换床位中弹出层的信息显示
let exchangeData = reactive({
  exchangeForm: {
    // 显示的属性内容
    customerName: "",
    customerSex: "",
    bedDetails: "",
    startDate: "",
    oldRoomNo: "",
    // 提交参数属性
    id: "",
    customerId: "",
    buildingNo: "606",
    newRoomNo: "",
    newBedId: "",
    oldBedId: "",
    endDate: "",
    newRoomFloor: "一楼"
  }
});

// 查询对应楼层的空闲房间号
function getAllRoomsByFloor() {
  queryAllRoomByFloor({ "floor": exchangeData.exchangeForm.newRoomFloor })
    .then(res => {
      roomList.splice(0, roomList.length);
      roomList.push(...res.data.roomList);
      exchangeData.exchangeForm.newRoomNo = "";
      exchangeData.exchangeForm.newBedId = "";
    })
    .catch(err => {
      console.log(err);
    });
}

// 通过房间号，查询空闲的床位
function getBed() {
  // 清空之前存储的床位信息
  exchangeData.exchangeForm.newBedId = "";

  // 通过房间号，查询空闲床位
  queryKxcwByRoomNo({ "roomNo": exchangeData.exchangeForm.newRoomNo })
    .then(res => {
      console.log(res);
      bedList.splice(0, bedList.length);
      bedList.push(...res.data);
    });
}

// 调换床位的存储
function exchangeSave() {
   // 调用交换床位的后端 API
   exchangeBedInfo({
    bedId: exchangeData.exchangeForm.newBedId,
    startDate: exchangeData.exchangeForm.startDate,
    endDate: exchangeData.exchangeForm.endDate,
    customerId: exchangeData.exchangeForm.customerId,
    oldBedId: exchangeData.exchangeForm.oldBedId
  })
    .then(res => {
      if (res.success) {
        // 调换床位成功后，关闭弹窗
        changeDialogvisible.value = false;
        // 提示用户成功
        this.$message.success('床位调换成功');
        // 刷新表格数据
        BedInfoData();
      } else {
        // 失败后提示用户
        this.$message.error('床位调换失败');
      }
    })
    .catch(err => {
      console.error('调换床位请求失败', err);
      this.$message.error('系统错误，请稍后再试');
    });
}
// 处理点击确定按钮的操作
const handleConfirm = () => {
  exchangeSave(); // 执行床位调换方法
  BedInfoData();
  changeDialogvisible.value = false; // 关闭弹窗
};

//床位修改-显示
function revise(row){
  reviseDialogvisible.value = true;
  reviseData.reviseForm.id=row.id;
  reviseData.reviseForm.customerName=row.customerName;
  reviseData.reviseForm.customerSex=row.customerSex;
  reviseData.reviseForm.bedDetails=row.bedDetails;
  reviseData.reviseForm.startDate=row.startDate;
  reviseData.reviseForm.endDate="";
}
//修改信息中弹出层的信息显示
let reviseData = reactive({
  reviseForm: {
    // 显示的属性内容
    customerName: "",
    customerSex: "",
    bedDetails: "",
    startDate: "",
    // 提交参数属性
    id: "",
    customerId: "",
    endDate: "",
  }
});
// 修改信息的存储
function reviseSave() {
   // 调用交换床位的后端 API
   reviseBedInfo({
    id: reviseData.reviseForm.id,
    customerId: reviseData.reviseForm.customerId,
    endDate: reviseData.reviseForm.endDate
  })
    .then(res => {
      if (res.success) {
        reviseDialogvisible.value = false;
        this.$message.success('修改信息成功');
        BedInfoData();
      } else {
        this.$message.error('修改信息失败');
      }
    })
    .catch(err => {
      console.error('修改信息请求失败', err);
      this.$message.error('系统错误，请稍后再试');
    });
}
// 处理点击保存按钮的操作
const handleSaveConfirm = () => {
  reviseSave(); 
  BedInfoData();
  reviseDialogvisible.value = false; // 关闭弹窗
};
</script>

<template>
  <!-- 显示标题 -->
  <div style="margin-left: 70px;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">护理管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户护理设置</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="common-layout" style="overflow-x: hidden;">
    <!-- 外层容器 -->
    <el-container style="margin-top: 25px;">
      <!-- 顶部容器 -->
      <el-header>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="姓名：">
                <el-input clearable v-model="queryParam.bedDetailsVo.customerName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button @click="btnQuery" type="primary">查询</el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <!-- 分割线 -->
      <el-divider style="margin:0;margin-left: 48px;"></el-divider>

      <!-- 主要区域容器 -->
      <el-main style="margin-left: 28px">
        <!-- 表格区 -->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="120" />
          <el-table-column align="center" prop="customerName" label="客户姓名" width="150" />
          <el-table-column align="center" prop="customerAge" label="年龄" width="100" />
          <el-table-column align="center" prop="customerSex" label="性别" width="100">
            <template #default="scoped">
              {{ scoped.row.customerSex == 0 ? '男' : '女' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="roomNo" label="房间号" width="150" />
          <el-table-column align="center" prop="buildingNo" label="所属楼房" width="150" />
          <el-table-column align="center" prop="contactTel" label="联系电话" width="180" />
          <el-table-column align="center" prop="levelName" label="护理级别" width="150" />
          <el-table-column align="center" prop="date" label="操作" width="150">
            <template #default="scoped">
              <el-button type="primary" size="small" @click="exchange(scoped.row)">移除护理级别</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="position: fixed; margin-left: 10px;margin-top: 25px;"
          background
          :page-size="queryParam.pageInfoVo.pageSize"
          layout="prev, pager, next"
          :total="queryParam.pageInfoVo.total"
          @current-change="handleCurrentChange"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
        />
      </el-main>
    </el-container>
  </div>
</template>

<style lang="css" scoped>
</style>
